<template>
	<view>

		<view class="arrow"
			:style="`padding-top:${xcxmenuInfo.top}px;height:${xcxmenuInfo.height}px;line-height:${xcxmenuInfo.height}px;background:#fff;padding-bottom:20rpx`">
			<uni-icons type="arrow-left" size="30" @click="back"></uni-icons>
            <view  v-if="threadData.tid" class="user" :style="`top:${xcxmenuInfo.top + (xcxmenuInfo.height - 25)/2}px;`">
				<view class="avatar">
					<image mode="aspectFill" :src="threadData.icon"></image>
				</view>
				<view class="uname">
					{{threadData.author}}
				</view>
			</view>
		</view>
		<view class="threadController" v-if="threadData.tid"
			:style="`padding-top:${xcxmenuInfo.top+xcxmenuInfo.height}px;`">
            
			<view class="threadInfo">
				<view class="title">{{threadData.subject}}</view>
				<view class="threadInfoData">
					<view class="forumname"><i  class="iconfont icon-huati_topic"></i>{{threadData.fname}}</view>
					<view class="t">{{threadData.postdate}}</view>
					<view class="t">阅读{{threadData.hits}}</view>
				</view>
				<view class="message">
					<mp-html :content="parmsContent(threadData.content)" container-style="" />
				</view>
				<view class="digg">
					<view class="diggHead">
						<view class="diggText" v-if="threadData.pingCount>0">
							<view class="num">{{threadData.pingCount}}</view>
							<view class="t">已点赞</view>
						</view>
						<view class="diggText" v-else>
							<view class="t">无人点赞</view>
						</view>
					</view>
					<view class="diggUser">
						<image mode="aspectFill" :src="digguser.icon" class="diggAvatar" v-for="digguser in threadData.pinger"></image>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="loading">
			<uni-load-more iconType="circle" status="loading" />
		</view>
	</view>
</template>



<script>
	// #ifdef MP-WEIXIN
	const xcxmenuInfo = wx.getMenuButtonBoundingClientRect()
	// #endif
	// #ifndef MP-WEIXIN
	const xcxmenuInfo = {
		height: 30,
		top: 10
	};
	// #endif
	import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
	import {
		getThread
	} from '@/components/kevinrong-http/thread.js'
	export default {
		components: {
			mpHtml
		},
		data() {
			return {
				xcxmenuInfo: xcxmenuInfo || [],
				pageCount: '0', //页面深度
				query: {},
				threadData: [{}],
			}
		},
		onLoad(options) {
			let tid = options.tid
			this.query = {
				tid: tid
			}

			this.getCurrentPage()
			this.fetchData()
		},

		methods: {
			parmsContent(Content) {
				return Content.replace(/(<br \/>){2,}/g, "<br />").replace(/(<br \/>){1,}/g, "<br /><br />")
					.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&quot;/g, '"')
					.replace(/(<ol>)/g, '').replace(/(<\/ol>)/g, '')
			},
			getCurrentPage() {
				this.pageCount = getCurrentPages().length
			},
			// 获取富文本图片预览当前下标 item当前的富文本内容 indexs当前项的下标
			fetchData() {
				getThread(this.query).then(r => {
					if (r.data.code == 200) {
						this.threadData = r.data.data
					}
				})
			},
			back() {
				if (this.pageCount < 2) {
					uni.switchTab({
						url: '/pages/index/index'
					})
				} else if (this.pageCount > 0) {
					uni.navigateBack({
						delta: 2
					})
				}
			}
		}
	}
</script>


<style lang="scss" scoped>
	::v-deep .blockcode {
		font-size: 12px;
		background-color: #eee;
		color: #666;
		border: 1px solid #ddd;
		word-wrap: break-word;
		padding: 20rpx;
		margin: 20rpx 0;

		li {
			list-style-type: none;
		}
	}

	.arrow {
		position: fixed;
		width: calc(100% - 30rpx);
		background-color: #fff;
		border-bottom:1px solid #eee;
		z-index: 999;
		padding-left:30rpx;
		.user{
			position: absolute;
			left:120rpx;
			display: flex;
			align-items: center;
			height:50rpx;
			.avatar{
				height:50rpx;
				image{
					width: 50rpx;
					height:50rpx;
					border-radius: 100%;
				}
			}
			.uname{
				margin-left:20rpx;
				font-size:32rpx;
				color:$h2FontColor;
			}
		}
	}

	.loading {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.BigImg {
		width: 100%;

		.image {
			width: 100%;
			height: 380rpx;
		}
	}

	.threadInfo {
		padding: 20rpx 40rpx;
		.digg{
			margin:30rpx 0;
			.diggUser{
				margin-top:20rpx;
				display: flex;
				align-items: center;
				.diggAvatar{
					width:60rpx;
					height:60rpx;
					border-radius: 100%;
					margin-left:-25rpx;
					border:2px solid #fff;
					&:first-child{
						margin-left: 0;
					}
				}
			}
			.diggHead{
				color:#888;
				display: flex;
				justify-content: space-between;
				.diggText{
					display: flex;
					.t{
						font-weight: bold;
						margin-left:10rpx;
					}
				}
			}
		}
		.threadInfoData{
			display: flex;
			align-items: center;
			padding-bottom:20rpx;
			.forumname{
				    font-size: 28rpx;
				    display: flex;
					align-items: center;
				    color: #6772FF;
					.iconfont{
						margin-right:5rpx;
					}
			}
			.t{
				font-size: 28rpx;
				color:#999;
				margin-left:40rpx;
			}
		}
        
		.title {
			color: $h2FontColor;
			font-weight: bold;
			font-size: 40rpx;
			margin: 30rpx 0;
		}

		.message {
			line-height: 58rpx;
			font-size: 36rpx;
			color: #444;

			::v-deep img,
			::v-deep image {
				margin: 15rpx 0;
			}

		}
	}
</style>